
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/jumbotron/">

    

    <!-- Bootstrap core CSS -->
<!-- <link href="../static/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<link href="../static/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      body{
          background: #06357a;
      }
    </style>

    
  </head>
  <body>
    


<main>

<section class="text-center">
    <h2 class="fw-light"><h2 style="font-weight: bolder;">BMI计算器</h2></h2>
    <h3 class="fw-light"><br>此功能可以帮助用户计算BMI，并根据结果提供建议。</h3>
</section>
    

  <div class="container py-2">
    <header class="mb-4 border-bottom">

    </header>
    <div class="modal-dialog" role="document">
      <div class="modal-content rounded-6 shadow">
        <div class="modal-body p-5">
          
          <form method="post" action="/result_bmi">

            <h1 class="h3 mb-5 fw-normal">请输入您的身高（CM）和体重（KG）！</h1>
        
            <div class="form-floating">
              <input type="text" class="form-control" name="height" id="height"  value="" required="" placeholder="height">
              <label for="height">您的身高  eg.180</label>

            </div>
            <br>
            <div class="form-floating">
              <input type="text" class="form-control" name="weight" id="weight"  value="" required="" placeholder="weight">
              <label for="weight">您的体重 eg.70</label>
            </div>
        
            <div class="checkbox mb-5">

            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit" input type="submit">提交</button>
          </form>
  

        </div>
      </div>
    </div>
  </div>

      
</main>

<footer class="text-muted py-2">
  <div class="container">
    <p class="float-end mb-2">
      <a href="#">Back to top</a>
    </p>
    </div>
</footer>


    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

      
  </body>
</html>